*{
	margin:0;
	padding:0;
}
html{
	font-family:微软雅黑;
}
li{
	list-style:none;
}
a{
	text-decoration:none;
}

#roles{
	width:960px;
	height:230px;
	/*background:pink;*/
	margin:0 auto;
	margin-top:20px;
}

.zu{
	float:left;
}

.zu .zuname{
	width:70px;
	height:230px;
	background:#3B8BED;
	float:left;
	position:relative;
	cursor:pointer;
}
.zuname span{
	display:block;
	width:20px;
	font-size:22px;
	margin:0 auto;
	margin-top:80px;
}

.zuname .arow{
	width:0;
	height:0;
	border-width:8px;
	border-style:solid;
	border-color:transparent transparent transparent #F24854;
	position:absolute;
	z-index:999;
	top:50%;
	right:-16px;
	display:none;
}

.role{
	float:left;
	width:0;
	height:230px;
	/*background:red;*/
	/*position:relative;*/
	overflow:hidden;
	transition:width 0.3s linear;
}
.role ul li{
	float:left;
}
.role .roleinfo{
	float:left;
	width:0;
	/*width:378px;*/
	height:230px;
	background:#F5F9FF;
	background-repeat:no-repeat;
	overflow:hidden;
	transition:width 0.3s linear;
	position:relative;
}
.role .rolename{
	float:left;
	width:60px;
	height:228px;
	background:#EAF1FA;
	border:1px solid #fff;
	position:relative;
	cursor:pointer;
}
.rolename .roletext{
	width:20px;
	font-size:16px;
	margin:0 auto;
	margin-top:20px;
}
.rolename .roleimg{
	width:100%;
	height:120px;
	background-repeat:no-repeat;
	background-position:bottom center;
	position:absolute;
	bottom:20px;
	-webkit-filter:grayscale(100%);
	filter:grayscale(100%);
}
.rolename .line{
	width:1px;
	height:54px;
	background:#BFD0E5;
	position:absolute;
	top:20px;
	left:0;
	display:none;
}

.roleinfo .rolecontext{
	width:210px;
	height:120px;
	/*background:pink;*/
	position:absolute;
	top:40px;
	left:160px;
}
.rolecontext p{
	font-size:16px;
	font-weight:700;
}
.rolecontext .title{
	font-size:16px;
	font-weight:400px;
	margin-bottom:25px;
}
.rolecontext .bangpai{
	margin-top:5px;
}
.rolecontext .bangpai a{
	color:#3C3C3C;
	font-size:14px;
}
.rolecontext .bangpai a:hover{
	text-decoration:underline;
}



#active .zuname{
	background:#F24854;
}
#active .arow{
	display:block;
}
#active .role{
	width:750px;
}
.active_role .roleinfo{
	width:378px;
}
.active_role .rolename{
	background:#F5F9FF;
}

.active_role .roleimg{
	-webkit-filter:grayscale(0%);
	filter:grayscale(0%);
}
.active_role .line{
	display:block;
}